<template>
  <el-dialog :visible.sync="dialogTableVisible" :append-to-body="true" :lock-scroll="false" :title="isEdit?'Edit':'Create'" width="900px" @close="handleCloseDetailDialog">

    <!--<el-form-item :label="$t('table.area')" prop="area" required>-->
    <!--<el-select v-model="postForm.area" clearable placeholder="Please Chose" width="600px">-->
    <!--<el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"/>-->
    <!--</el-select>-->
    <!--</el-form-item>-->
    <el-tabs v-model="activeName">
      <el-tab-pane label="Basic Info" name="first" >
        <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="150px" style="margin-left:50px;">
          <div style="position: absolute;  z-index: -9999;" >
            <el-input label="111"/>
            <el-input type="password" label="222"/>
          </div>
          <el-form-item :label="$t('table.available')" prop="is_available" required>
            <el-radio-group v-model="postForm.is_available">
              <el-radio :label="1">Available</el-radio>
              <el-radio :label="0">Unavailable</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item :label="$t('userfiles.gender')" prop="gender">
            <el-radio-group v-model="postForm.gender">
              <el-radio :label="0">unknown</el-radio>
              <el-radio :label="1">male</el-radio>
              <el-radio :label="2">female</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('userfiles.first_name')" prop="first_name" required>
            <el-col :span="20">
              <el-input v-model="postForm.first_name" :label="$t('table.first_name')"/>
            </el-col>
          </el-form-item>

          <el-form-item :label="$t('userfiles.last_name')" prop="last_name" required>
            <el-col :span="20">
              <el-input v-model="postForm.last_name" :label="$t('table.last_name')"/>
            </el-col>
          </el-form-item>
          <el-form-item :label="$t('userfiles.email')" prop="email" required>
            <el-col :span="20">
              <el-input v-model="postForm.email" :label="$t('userfiles.email')"/>
            </el-col>
          </el-form-item>

          <el-form-item :label="$t('userfiles.mobile')" prop="mobile" >
            <el-col :span="20">
              <el-input v-model="postForm.mobile" :label="$t('userfiles.mobile')"/>
            </el-col>
          </el-form-item>

          <el-form-item :label="$t('userfiles.birthday')" prop="birthday" >
            <el-col :span="20">
              <el-date-picker v-model="postForm.birthday" type="datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"/>
            </el-col>
          </el-form-item>
          <el-form-item :label="$t('table.password')" prop="password" >
            <el-col :span="20">
              <el-input type="password" v-model="postForm.password" :label="$t('userfiles.password')"/>
            </el-col>
          </el-form-item>

          <el-form-item :label="$t('table.confirmpassword')" prop="confirmpassword" >
            <el-col :span="20">
              <el-input type="password" v-model="postForm.confirmpassword" :label="$t('userfiles.confirmpassword')"/>
            </el-col>
          </el-form-item>

          <el-form-item :label="$t('userfiles.remark')" prop="remark" >
            <el-col :span="20">
              <el-input v-model="postForm.remark" :label="$t('userfiles.remark')" type="textarea"/>
            </el-col>
          </el-form-item>
          <el-form-item prop="is_available" >
            <el-col :span="20">
              <el-input v-model="postForm.is_available" :label="$t('userfiles.is_available')" type = "hidden"/>
            </el-col>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane v-if="isEdit" label="address" name="second">
        <el-table
          :data="addresslist"
          border
          fit
          highlight-current-row
          style="width: 100%">
          <el-table-column
            :label="$t('useraddressfiles.name')"
            align="center"
            min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.first_name }} {{ scope.row.last_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('useraddressfiles.mobile')"
            align="center"
            prop="title"
            min-width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.mobile }}</span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('useraddressfiles.email')"
            align="center"
            prop="title"
            min-width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.email }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('useraddressfiles.address')"
            align="center"
            prop="title"
            min-width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.address }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCloseDetailDialog">{{ $t('table.cancel') }}</el-button>
      <el-button type="primary" @click="submitForm('postForm')">{{ $t('table.submit') }}</el-button>
    </div>

  </el-dialog>
</template>
<script>

import userApi from '@/api/user/user'
import ScrollPane from '@/components/ScrollPane/index'

const defaultForm = {
  area: '',
  name: '',
  last_name: '',
  middle_name: '',
  first_name: '',
  display_name: '',
  mobile: '',
  email: '',
  gender: 0,
  birthday: '',
  avatar: '',
  is_available: 1,
  remark: ''
}

export default {
  name: 'Detail',
  components: { ScrollPane },
  data() {
    return {
      activeName: 'first',
      postForm: Object.assign({}, defaultForm),
      rules: {
        area: [
          { required: true, message: 'area is required', trigger: 'change' }
        ]
      },
      areaList: [],
      imageUrl: '',
      recordid: 0,
      dialogTableVisible: false,
      isEdit: false,
      roleList: [],
      checkedCities: [],
      addresslist: []
    }
  },
  computed: {
    lang() {
      return this.$store.getters.language
    }
  },
  created() {
  },

  mounted() {

  },

  methods: {
    showRecord(id) {
      userApi.showRecord(id).then(response => {
        const serviceResponse = response.data
        if (serviceResponse.code === 0) {
          this.postForm = serviceResponse.data.record
          this.areaList = serviceResponse.data.areaList
          this.addresslist = serviceResponse.data.addresslist
        }
      }).catch(err => {
        console.log(err)
      })
    },

    handleCreateRecord() {
      userApi.createRecord().then(response => {
        const serviceResponse = response.data
        if (serviceResponse.code === 0) {
          this.areaList = serviceResponse.data.areaList
        }
      }).catch(err => {
        console.log(err)
      })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editId > 0) {
            userApi.updateRecord(this.editId, this.postForm).then(response => {
              const serviceResponse = response.data
              if (serviceResponse.code === 0) {
                this.$message({
                  type: 'success',
                  message: serviceResponse.msg
                })
                this.handleCloseDetailDialog()
              } else {
                this.$message({
                  type: 'error',
                  message: serviceResponse.msg
                })
              }
            })
          } else {
            userApi.storeRecord(this.postForm).then(response => {
              const serviceResponse = response.data
              if (serviceResponse.code === 0) {
                this.$message({
                  type: 'success',
                  message: serviceResponse.msg
                })
                this.handleCloseDetailDialog()
              } else {
                this.$message({
                  type: 'error',
                  message: serviceResponse.msg
                })
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(postForm) {
      this.$refs[postForm].resetFields()
    },

    handShowDetailDialog(id) {
      if (id > 0) {
        this.isEdit = true
        this.editId = id
        this.showRecord(id)
      } else {
        this.isEdit = false
        this.handleCreateRecord()
        this.postForm = Object.assign({}, defaultForm)
      }

      this.dialogTableVisible = true
    },
    handleCloseDetailDialog() {
      this.resetForm('postForm')
      this.editId = 0
      this.$emit('indexRecord')
      this.dialogTableVisible = false
    }
  }

}
</script>
